<template>
  <div class="wik-tools">
    <div class="wik-tools-left">
      <div class="wik-tools-left-search">
        <el-icon class="icon" @click="inputRef.focus()"><Search /></el-icon>
        <el-form @submit.prevent="submitHandler">
          <el-input
            placeholder="搜索"
            v-model="searchOptions.keyword"
            class="wik-tools-left-search-input"
            ref="inputRef"
          ></el-input>
        </el-form>
        <el-icon
          v-if="searchOptions.keyword.length"
          class="icon wik-icon-p"
          @click="
            () => {
              searchOptions.keyword = '';
              setCurrentPagination();
              eventBus.emit('refresh');
            }
          "
        >
          <Close />
        </el-icon>
        <TriggerContext
          v-else-if="searchSetting?.isSearchRange"
          :component="SearchRange"
          @open="isIconActive = true"
          @close="isIconActive = false"
          class="wik-icon-p"
          direction="left"
        >
          <el-icon class="icon" :class="{ 'icon-active': isIconActive }"><ArrowDown /></el-icon>
        </TriggerContext>
      </div>
      <!-- <el-divider direction="vertical" /> -->
      <TriggerContext
        :component="SearchFilter"
        @open="isFilterActive = true"
        @close="isFilterActive = false"
        v-if="searchSetting?.isFilter"
      >
        <div class="wik-tools-left-filter" :class="{ 'wik-tools-left-filter-active': isFilterActive }">
          <el-icon class="icon mr8"><Finished /></el-icon>
          <span class="mr8">筛选</span>
          <span class="shu" v-show="searchOptions.condition.length">{{ searchOptions.condition.length }}</span>
        </div>
      </TriggerContext>
      <div class="wik-tools-left-total ml20">
        <span class="mr8">
          {{ pagination?.total }}
        </span>
        个{{ searchSetting?.title || "工作项" }}
      </div>
    </div>
    <div class="wik-tools-right">
      <div class="wik-tools-right-box" v-if="searchSetting?.viewShow">
        <el-tooltip
          v-for="(item, index) in viewStructure"
          class="box-item"
          effect="dark"
          :content="item.label"
          placement="top"
          :key="'tools_structure' + index"
        >
          <SvgIcon @click="viewStructureChange(index)" class="icon" :class="{ active: item.isActive }" :name="item.icon" />
        </el-tooltip>
        <div class="box-slider" :style="`left:${sliderLeft}px`"></div>
      </div>
      <slot name="tool-right"></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, inject, onMounted, unref, provide } from "vue";
import { useData } from "@table/hooks/useData";
import TriggerContext from "@/components/TriggerContext/index.vue";
import SearchRange from "./components/SearchRange.vue";
import SearchFilter from "./components/SearchFilter.vue";
import { TableOptions, TableColumn, Pagination } from "@table/interface";
import { useKeyValueStore } from "@/hooks/useKeyValueStore";

const { getValue } = useKeyValueStore();
const { searchOptions, originalTableColumns, eventBus, setCurrentPagination } = useData();
// 所有的下拉
const selectedList = ref<any>({});
const inputRef = ref();
const options = inject("options");
const pagination = inject<Pagination>("pagination");
const { searchSetting } = unref(options) as TableOptions;
const sliderLeft = ref(2);
const viewStructure = ref([
  {
    id: 1,
    label: "树状",
    icon: "tree",
    isActive: true
  },
  {
    id: 2,
    label: "平铺",
    icon: "ping",
    isActive: false
  }
]);
const isIconActive = ref(false);
const isFilterActive = ref(false);

provide("selectedList", selectedList);
// 移动slider
const moveSlider = (index: number) => {
  const el = document.querySelector(".box-slider");
  const elWidth = el?.getBoundingClientRect().width || 0;
  sliderLeft.value = index * elWidth + 2;
};
const viewStructureChange = (index: number) => {
  viewStructure.value.forEach((item: any) => {
    item.isActive = false;
  });
  viewStructure.value[index].isActive = true;
  moveSlider(index);
};

const initSearchOptions = () => {
  // 判断是否有缓存
  const keywordRange = originalTableColumns.value
    .filter((item: TableColumn) => item.isSearch)
    .map((item: TableColumn) => item.key);

  if (searchSetting.storage) {
    const value = JSON.parse(localStorage.getItem(searchSetting.storageKey as string) || "{}");
    if (Reflect.ownKeys(value).length > 0) {
      searchOptions.value = value;
    } else {
      searchOptions.value["keywordRange"] = keywordRange;
    }
    localStorage.setItem(searchSetting.storageKey as string, JSON.stringify(searchOptions.value));
  } else {
    searchOptions.value["keywordRange"] = keywordRange;
  }
};
const submitHandler = () => {
  setCurrentPagination();
  eventBus.emit("refresh");
};
onMounted(() => {
  getValue("orderTableFilterSelectList").then(res => {
    selectedList.value = res || {};
  });
  initSearchOptions();
  // if (searchSetting.isSearchRange) {
  //   initSearchOptions();
  // } else {
  //   searchOptions.value["keywordRange"] = [];
  //   localStorage.setItem(searchSetting.storageKey as string, JSON.stringify(searchOptions.value));
  // }
});
</script>
<style lang="scss" scoped>
.wik-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  font-size: 14px;
  color: #666666;
  &-left {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    &-search {
      position: relative;
      display: flex;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      border-radius: 4px;
      .icon {
        width: 30px;
        font-size: 16px;
        cursor: pointer;
      }
      .el-icon {
        height: 36px;
      }
      .wik-icon-p {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    &-total {
      color: #999999;
      span {
        color: #666666;
      }
    }
    &-filter {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 8px;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.3s;
      .icon {
        font-size: 20px;
      }
      .shu {
        width: 16px;
        height: 16px;
        font-size: 12px;
        line-height: 16px;
        color: $primary-color;
        text-align: center;
        background: var(--el-color-primary-light-9);
        border-radius: 50%;
      }
      &:hover {
        color: $primary-color;
        background: var(--el-color-primary-light-9);
      }
    }
    &-filter-active {
      color: $primary-color;
      background: var(--el-color-primary-light-9);
    }
  }
  &-right {
    display: flex;
    flex: 0 0 300px;
    align-items: center;
    justify-content: flex-end;
    &-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 28px;
      padding: 2px;
      color: #666666;
      background-color: #f5f5f5;
      border-radius: 2px;
      transition: all 0.3s ease-in-out;
      .box-item {
        margin-left: 10px;
      }
      .icon {
        position: relative;
        z-index: 2;
        height: 100% !important;
        padding: 0 12px;
        font-size: 14px;
        cursor: pointer;
        outline: none;
      }
      .active {
        color: #333333;
        border-radius: 2px;
        box-shadow:
          0 0 1px #0000001a,
          0 1px 4px -1px #0000001a;
      }
      .box-slider {
        position: absolute;
        top: 2px;
        left: 2px;
        z-index: 1;
        width: 14px;
        height: calc(100% - 4px);
        padding: 0 12px;
        background-color: #ffffff;
        transition: all 0.3s ease-in-out;
      }
    }
  }
  :deep(.el-input) {
    .el-input__wrapper {
      box-shadow: none;
    }
  }
  .icon-active {
    color: $primary-color;
  }
}
</style>
